<template>
    <div>
        <el-form label-width="90px" v-if="form.name !== 'SpanLayout'">
            <el-form-item label="表单id">
                <el-input size="small" :readonly="true" v-model="form.id" />
            </el-form-item>
            <el-form-item label="表单名称">
                <el-input size="small" clearable v-model="form.title" />
            </el-form-item>
            <component :is="form.name" v-model="form.props" />
            <!-- <el-form-item label="必填项">
                <el-switch v-model="form.props.required"></el-switch>
            </el-form-item>
            <el-form-item label="可打印">
                <el-switch v-model="form.props.enablePrint"></el-switch>
            </el-form-item> -->
        </el-form>
        <el-empty v-else description="当前组件不支持配置"></el-empty>
    </div>

</template>

<script>
import LeftLeftTop from './config/LeftLeftTopConfig.vue'
import LeftLeftCenter from './config/LeftLeftTopConfig.vue'
import LeftLeftBottom from './config/LeftLeftTopConfig.vue'
import LeftCenterTop from './config/LeftLeftTopConfig.vue'
import LeftCenterBottom from './config/LeftLeftTopConfig.vue'
import LeftRightTop from './config/LeftLeftTopConfig.vue'
import LeftRightBottom from './config/LeftLeftTopConfig.vue'

import RightLeftTop from './config/LeftLeftTopConfig.vue'
import RightLeftCenter from './config/LeftLeftTopConfig.vue'
import RightLeftBottom from './config/LeftLeftTopConfig.vue'
import RightCenterTop from './config/LeftLeftTopConfig.vue'
import RightCenterCenter from './config/LeftLeftTopConfig.vue'
import RightCenterBottom from './config/LeftLeftTopConfig.vue'
import RightRightTop from './config/LeftLeftTopConfig.vue'
import RightRightBottom from './config/LeftLeftTopConfig.vue'

export default {
    name: "FormComponentConfig",
    components: {
        LeftLeftTop,
        LeftLeftCenter,
        LeftLeftBottom,
        LeftCenterTop,
        LeftCenterBottom,
        LeftRightTop,
        LeftRightBottom,
        RightLeftTop,
        RightLeftCenter,
        RightLeftBottom,
        RightCenterTop,
        RightCenterCenter,
        RightCenterBottom,
        RightRightTop,
        RightRightBottom,
    },
    props: {},
    computed: {
        form() {
            return this.$store.state.selectFormItem
        }
    },
    data() {
        return {}
    },
    methods: {}
}
</script>

<style scoped></style>